<template>
    <div class="content">
        <div class="artbox">
            <div class="left">
                <div class="title">
                    <div class="zh">新闻动态</div>
                    <div class="en">NEWS TENDENCY</div>
                </div>

                <div class="itemlist">
                    <div class="item" v-for="item in itemList" :key="item.id" @click="classid = item.id">
                        {{ item.classname }}
                    </div>
                </div>
                <div class="ma">
                    <img src="" alt="二维码">
                </div>
                <div class="ma">
                    400-000-0000
                </div>

            </div>
            <div class="right">
                <div class="art_box">
                    <div class="art_list" v-for="item in artList" :key="item.id" >
                        <div class="art">
                            <div class="fm">
                                <img src="" alt="">
                            </div>
                            <div class="info">
                                <div class="art_title">
                                    {{ item.title }}
                                </div>
                                <div class="desc">
                                    {{ item.desc ? item.desc: "暂无描述" }}
                                </div>
                                <div class="tag">
                                    <div class="click">
                                        <div class="label">
                                            <i class="el-icon-view"></i>
                                            <span>阅读量</span>
                                        </div>
                                        <div class="num">
                                            {{ item.click }}
                                        </div>
                                    </div>
                                    <div class="addtime">
                                        {{ item.addtime }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 分页 -->
                <div class="page">
                    <el-pagination
                    background
                    layout="prev, pager, next"
                    :page-size="PageSize"
                    @current-change="PageChange"
                    :current-page="CurrentPage"
                    :total="Total">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                itemList: [],
                classid: "",
                artList: [],
                PageSize: 10,
                CurrentPage: 1,
                Total: 0,
            }
        },
        mounted () {
            this.getItemList();
        },
        created () {
            let id = this.$route.params.id;
            if (id) {
                this.classid = id
                this.getArtList()
            }
        },
        watch: {
            classid() {
                this.getArtList(1)
            }
        },
        methods: {
            // 获取目录
            async getItemList() {
                let res = await this.$axios.post("/port/index/infomore", { key: this.$key })
                let code = res.data.code 
                if (code == 200) {
                    this.itemList = res.data.data
                }
            },

            // 根据ID获取文章列表
            async getArtList( pages ) {
                this.artList = []
                let page = pages ? pages : "1"
                if (this.classid) {
                    let res = await this.$axios.post("/port/index/weninfomore", { key: this.$key, id: this.classid, page})
                    let code = res.data.code 
                    if (code == 200) {
                        this.artList = res.data.data
                        this.Total = res.data.data[0].count ? res.data.data[0].count : 0
                    }
                } 
                 console.log(this.artList);
                
            },

            // 页码变化
             PageChange( page ) {
                 console.log(page);
                 this.CurrentPage = page
                 this.getArtList( this.CurrentPage )
            },
        },
    }
</script>

<style lang="scss" scoped>
.content {
    width: 100%;
    height: 100%;
    padding: 20px;
    background-color: #f5f5f5;
    .artbox {
        width: 1200px;
        margin: 20px auto;
        
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        .left {
            width: 300px;
            overflow: hidden;
            background-color: #fff;
            .title {
                width: 100%;
                text-align: center;
                background-color: red;
                color: #fff;
                padding: 20px 0;
                .zh {
                    font-size: 26px;
                    line-height: 40px;
                }
                .en {
                    font-size: 14px;
                    line-height: 30px;
                }
            }
            .itemlist {
                width: 100%;
                .item {
                    width: 100%;
                    text-align: center;
                    height: 30px;
                    line-height: 30px;
                    margin: 10px 0;
                    cursor: pointer;
                }
            }
            .ma {
                width: 100%;
                text-align: center;
                img {
                    width: 120px;
                    height: 120px;
                }
            }
        }
        .right {
            width: 860px;
            background-color: #fff;
            padding: 20px;
            box-sizing: border-box;
            .page {
                width: 100%;
                text-align: center;
                padding: 10px 0;
            }
            .art_box {
                width: 100%;
                .art_list {
                    width: 100%;
                    padding: 20px;
                    box-sizing: border-box;
                    border-bottom: 1px solid #f5f5f5;
                    .art {
                        width: 100%;
                        display: flex;
                        
                        .fm {
                            width: 220px;
                            height: 150px;
                            img {
                                width: 220px;
                                height: 150px;
                            }
                        }
                        .info {
                            flex: 1;
                            .art_title {
                                font-size: 18px;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                height: 30px;
                                line-height: 30px;
                            }
                            .desc {
                                font-size: 14px;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                display: -webkit-box;
                                -webkit-box-orient: vertical;
                                -webkit-line-clamp: 3;
                                height: 75px;
                                margin-top: 20px;
                            }
                            .tag {
                                display: flex;
                                align-items: center;
                                color: #aaa;
                                font-size: 12px;
                                height: 25px;
                                line-height: 25px;
                                .click {
                                    display: flex;
                                    align-items: center;
                                    .label {
                                        display: flex;
                                        align-items: center;
                                    }
                                    .num {
                                        font-size: 12px;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>